<template>
  <div class="register">
    <div class="register-form">
      <h3 class="title">用户注册</h3>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
        </el-form-item>
        <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
          <el-input v-model="form.password" placeholder="请输入用户密码" type="password" />
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: space-around; margin-bottom: 20px">
        <el-button type="primary" style="width: 48%" @click="handleSubmit">注 册</el-button>
        <el-button style="width: 48%" @click="back2login">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { registerUsers } from '../api/system/user'

export default {
  name: 'Register',
  data() {
    return {
      // 表单参数
      form: {},
      // 性别状态字典
      sexOptions: [
        {
          dictValue: '0',
          dictLabel: '男'
        },
        {
          dictValue: '1',
          dictLabel: '女'
        },
        {
          dictValue: '2',
          dictLabel: '未知'
        },
      ],

      // 表单校验
      rules: {
        nickName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ],
        email: [
          {
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      registerUsers(this.form).then((response) => {
        this.msgSuccess('注册成功')
        this.back2login()
      })
    },
    back2login() {
      this.$router.replace('/login')
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: '0'
      }
      this.resetForm('form')
    }
  }
}
</script>

<style>
  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/login-background.jpg");
    background-size: cover;
  }
  .register-form {
    border-radius: 6px;
    background: #ffffff;
    width: 40%;
    padding: 25px 40px 5px 25px;
    .el-input {
      height: 38px;
    input {
      height: 38px;
    }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
</style>
